import React,{useState,useEffect} from 'react'
import { Sidebar,ProductCard,Button } from 'react-vant';
import "../../api/index"
import reruire from "../../untlis/require";
import {useDispatch} from "react-redux"
import {CS} from "../../types/store.d"
import "./class.css"
function Class() {
  const dispatch=useDispatch()
    interface DATATYPES{
        name:string;
        id:string;
        img:string;
        children:DATATYPES[];
        price:string;
    }
    const [active, setActive] = useState(0);
    const [arr,setarr]=useState<Array<DATATYPES>>([])
    const [data,setdata]=useState<Array<DATATYPES>>([])
    useEffect(() => {
         reruire.get("/list").then(res=>{
            setarr(res.data.data)
            setdata(res.data.data[0].children)
        })
    }, [])
    const addshop=(item:any)=>{
      dispatch({
        type:CS,
        payload:item
      })
    }
    return (
        <div>
    <Sidebar
      value={active}
      onChange={(v) => {
        setActive(v);
        setdata(arr[v].children)
      }}
    >
        {
            arr&&arr.map((item,index)=>{
                return <Sidebar.Item key={index} contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={item.name}>
                {
                    data&&data.map((item,index)=>{
                        return <ProductCard
                        key={index}
                        price={item.price}
                        desc="描述信息"
                        title={item.name}
                        thumb={item.img}
                        footer={
                            <>
                              <Button className="bu1" onClick={()=>addshop(item)} size="mini" round plain style={{ marginRight: 2 }} >
                                +
                              </Button>
                            </>
                          }
                      />
                    })
                }
              </Sidebar.Item>
            })
        }

    </Sidebar>
        </div>
    )
}

export default Class
